<template>
	<view class="time_step">
		<view class="time_step_item" v-for="(item,index) in resData" :key="index" :style="dealTime(item)">

		</view>
	</view>
	<view class="time_hour">
		<text id="element1">6</text>
		<text id="element2">7</text>
		<text>8</text>
		<text>9</text>
		<text>10</text>
		<text>11</text>
		<text>12</text>
		<text>13</text>
		<text>14</text>
		<text>15</text>
		<text>16</text>
		<text>17</text>
		<text>18</text>
		<text>19</text>
		<text>20</text>
		<text>21</text>
		<text>22</text>
		<text>23</text>
		<text>24</text>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted } from 'vue'
	import dayjs from 'dayjs'
	const gap = ref(null)
	const resData = ref([
		{
			activityName: '周末读书会',
			startTime: '2024-12-31 10:32:00',
			endTime: '2024-12-31 12:41:00'
		},
		{
			activityName: '周末读书会',
			startTime: '2024-12-31 17:32:00',
			endTime: '2024-12-31 19:41:00',
			status: '待开始'
		}
	])

	const dealTime = itm => {
		console.log(itm)
		//一分钟的百分比
		const gap = 100 / 18 / 60
		//开始时间与结束时间 时间差值
		const diffInMinutes = dayjs(itm.endTime).diff(dayjs(itm.startTime), 'minute')
		// console.log(diffInMinutes, diffInMinutes * (gap.value / 60), 'diffInMinutesdiffInMinutesdiffInMinutes')
		//向左偏移的时间
		const leftTime = dayjs(itm.startTime).diff(dayjs(itm.startTime.slice(0, 11) + '06:00:00'), 'minute')
		console.log(leftTime, 'leftTimeleftTimeleftTime')
		return { width: diffInMinutes * gap + '%', left: leftTime * gap + '%' }
		// return { width: diffInMinutes * gap.value / 60 + 'px', left: leftTime * (gap.value) / 60 + 'px' }

	}
	onMounted(() => {
		function getHorizontalDistance(elem1, elem2) {
			// 获取两个元素的位置信息
			const rect1 = elem1.getBoundingClientRect()
			const rect2 = elem2.getBoundingClientRect()

			// 计算水平间距（两个元素的左边界的差值）
			const distance = rect2.left - rect1.left

			return distance
		}
		const element1 = document.getElementById('element1')
		const element2 = document.getElementById('element2')
		gap.value = getHorizontalDistance(element1, element2)
	})
</script>

<style lang="scss">
	.time_step {
		width: 100%;
		height: 3px;
		background-color: rgba(217, 217, 217, 1);
		margin-top: 100px;
		position: relative;

		.time_step_item {
			position: absolute;
			height: 100%;
			background-color: rgba(255, 141, 141, 1);
		}
	}

	.time_hour {
		display: flex;
		justify-content: space-between;
		font-size: 12px;
	}
</style>